<template>
  <div class="front-layout">
    <el-row>
      <el-col class="main" :offset="3" :span="18">
        <iheader></iheader>
        <el-row>
          <el-col :span="17">
            <Nuxt class="content" />
          </el-col>
          <el-col :span="7">
            <islide class="slide" />
          </el-col>
        </el-row>
        <ifooter></ifooter>
      </el-col>
      <el-col class="top" :span="2">
        <div class="backToTop">
          <i @click="backtopTop()" class="el-icon-top"></i>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import iheader from '@/components/front/header'
import ifooter from '@/components/front/footer'
import islide from '@/components/front/slide'
export default {
  components: {
    iheader,
    islide,
    ifooter
  },
  data() {
    return {
      
    }
  },
  methods: {
    backtopTop() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    }
  },
}
</script>

<style lang="less" scoped>
.front-layout {
  background: #eeeeee;
  background-image: linear-gradient(white 2px, transparent 0),
    linear-gradient(90deg, white 2px, transparent 0),
    linear-gradient(hsla(0, 0%, 100%, 0.3) 1px, transparent 0),
    linear-gradient(90deg, hsla(0, 0%, 100%, 0.3) 1px, transparent 0);
  background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
  .main {
    .el-row {
      margin: 10px 0 10px 0;
      .content {
        background-color: rgba(255, 255, 255, 0.5);
      }
      .slide {
        background-color: rgba(255, 255, 255, 0.5);
      }
    }
  }
  .top {
    .backToTop {
      i {
        position: fixed;
        font-size: 40px;
        height: 40px;
        width: 40px;
        cursor: pointer;
        bottom: 0;
        right: 50px;
        background-color: #c0c0c0;
        padding-top: 5px;
      }
    }
  }
}
</style>
